<template>
    <view class="LoadingWrapper posi">
        <view class="LoadingThrobber">
            <view class="Bar Bar1 primary"></view>
            <view class="Bar Bar2 primary"></view>
            <view class="Bar Bar3 primary"></view>
        </view>
    </view>
</template>

<script>
	export default{
		data() {
			return {
				visible: false
			}
		},
        props: {
        },
		onLoad(option) {
			// this.load(option.level)
		},
		methods: {
		}
	}
</script>
<style lang="scss" scoped>
    .posi {
    }
    .LoadingWrapper
    {
        margin: auto auto;
        vertical-align: middle;
    }

    .LoadingWrapper .LoadingThrobber
    {
        margin: 0rpx auto;
        width: 90rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ECECEC;
        border-radius: 50%;
    }

    .LoadingWrapper .LoadingText
    {
        color: #60acde;
        font-size: 22rpx;
        text-align: center;
    }
    @keyframes loading_throbber_bar
    {
        0%
        {
            transform: translateY(0);
        }

        30%
        {
            transform: translateY(0);
        }

        55%
        {
            transform: translateY(-10rpx);
        }

        100%
        {
            transform: translateY(0);
        }
    }


    @-webkit-keyframes loading_throbber_bar
    {
        0%
        {
            -webkit-transform: translateY(0);
        }

        30%
        {
            -webkit-transform: translateY(0);
        }

        55%
        {
            -webkit-transform: translateY(-10rpx);
        }

        100%
        {
            -webkit-transform: translateY(0);
        }
    }

    .LoadingWrapper .LoadingThrobber .Bar
    {
        -webkit-animation: test 2s infinite;
        float: left;
        margin: 0 6rpx;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: #CDCDCD;

        animation: loading_throbber_bar 1s ease-in-out infinite;
        -webkit-animation: loading_throbber_bar 1s ease-in-out infinite;
    }

    .LoadingWrapper .LoadingThrobber .Bar1
    {
    }

    .LoadingWrapper .LoadingThrobber .Bar2
    {
        animation-delay: 0.16s;
        -webkit-animation-delay: 0.16s;
    }

    .LoadingWrapper .LoadingThrobber .Bar3
    {
        animation-delay: 0.32s;
        -webkit-animation-delay: 0.32s;
    }
</style>
